<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    h1 {
        width: 1400px;
        text-align: center;
        margin: 0 auto;
    }

    table,
    th,
    td,
    tr {
        text-align: center;
    }

    table {
        margin: 50px auto;
        width: 800px;
    }

    th,
    td {
        width: 200px;
        line-height: 50px;
        height: 50px;
    }
</style>

<body>
    <h1>Vue购物车</h1>
    <table class="tab">
        <tr>
            <th>序号</th>
            <th>商品名称</th>
            <th>价格</th>
            <th>操作</th>
            <th>数量</th>
            <th>操作</th>
            <th>价格</th>
        </tr>
        <tr>
            <td>01</td>
            <td>裤子</td>
            <td>{{pri1}}</td>
            <td><button @click="num1_plus">+</button></td>
            <td>{{num1}}</td>
            <td><button @click="num1_min">-</button></td>
            <td>{{pri1*num1}}</td>
        </tr>
        <tr>
            <td>02</td>
            <td>衣服</td>
            <td>{{pri2}}</td>
            <td><button @click="num2_plus">+</button></td>
            <td>{{num2}}</td>
            <td><button @click="num2_min">-</button></td>
            <td>{{pri2*num2}}</td>
        </tr>
        <tr>
            <td>03</td>
            <td>鞋子</td>
            <td>{{pri3}}</td>
            <td><button @click="num3_plus">+</button></td>
            <td>{{num3}}</td>
            <td><button @click="num3_min">-</button></td>
            <td>{{pri3*num3}}</td>
        </tr>
    </table>
</body>
<script>
    let oTab = new Vue({
        el: ".tab",
        data: {
            pri1: 300,
            pri2: 500,
            pri3: 400,
            num1: 1,
            num2: 1,
            num3: 1,
        },
        methods: {
            num1_plus() {
                this.num1 = this.num1 + 1
            },
            num2_plus() {
                this.num2 = this.num2 + 1
            },
            num3_plus() {
                this.num3 = this.num3 + 1
            },
            num1_min() {
                this.num1 = this.num1 - 1
            },
            num2_min() {
                this.num2 = this.num2 - 1               
            },
            num3_min() {
                this.num3 = this.num3 - 1
            },
        }
    })
</script>

</html>